<template>
  <div class="p-6" style="color: #cfd3dc">
    <div>
      <div class="flex items-center">
        <el-input value="F12" style="width: 120px" disabled size="large" />
        <div class="ml-4">一键平仓 超价:</div>
        <el-input
          v-model.number="keyInfo.pingcang"
          style="width: 150px"
          size="large"
          class="ml-6"
          placeholder="请输入百分比值"
          ><template #append>%</template></el-input
        >
        <el-button type="primary" size="large" class="ml-48">保存</el-button>
      </div>
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="flex items-center mt-4"
      >
        <el-input
          v-model="item.name"
          style="width: 120px"
          disabled
          size="large"
        />
        <el-input
          v-model="item.type"
          style="width: 120px"
          disabled
          class="ml-4"
          size="large"
        />
        <div class="flex items-center ml-4" v-show="!item.hidden">
          <div>区间变动：</div>
          <el-select
            :value="1"
            disabled
            placeholder="百分比"
            size="large"
            style="width: 150px"
          >
            <el-option label="百分比" :value="1" />
          </el-select>
        </div>
        <el-input
          v-show="!item.hidden"
          v-model.number="item.value"
          style="width: 150px"
          size="large"
          class="ml-4"
          placeholder="请输入百分比值"
          ><template #append>%</template></el-input
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const keyInfo = ref({
  pingcang: 20,
});
const dataList = ref([
  {
    name: "↑",
    type: "增加委托价格",
    value: 0,
  },
  {
    name: "↓",
    type: "减少委托价格",
    value: 0,
  },
  {
    name: "Ctrl + ↑",
    type: "增加委托价格",
    value: 0,
  },
  {
    name: "Ctrl + ↓",
    type: "减少委托价格",
    value: 0,
  },
  {
    name: "←",
    type: "减少委托价格",
    value: 0,
  },
  {
    name: "→",
    type: "增加委托价格",
    value: 0,
  },
  {
    name: "Ctrl + ←",
    type: "减少委托价格",
    value: 0,
  },
  {
    name: "Ctrl + →",
    type: "增加委托价格",
    value: 0,
  },
  {
    name: "Ctrl + A",
    type: "修改委托价格",
    hidden: true,
  },
  {
    name: "Ctrl + S",
    type: "修改委托数量",
    hidden: true,
  },
  {
    name: "Ctrl + D",
    type: "切换交易方向",
    hidden: true,
  },
]);
</script>
<style lang="scss" scoped></style>
